<template>
    <div class="bi-collapse-box">
        <div class="bi-collapse-header"  @click="handleFold">
            <div class="label">
                <div class="icon">
                    <i class="bi-icon" :class="icon"></i>
                </div>
                <div class="text">{{label}}</div>
            </div>
            <div class="ctrl-box">
                <slot name="ctrl"></slot>
                <bi-icon :data="isFold?'fa-chevron-down':'fa-chevron-up'" ></bi-icon>
            </div>
        </div>
        <div class="bi-collapse-content" v-show="!isFold">
            <slot></slot>
        </div>
    </div>
</template>


<script>
export default{
    emits:['fold'],
    data(){
        return {
            isFold:false
        }
    },
    watch:{
        folded:{
            handler(val){
                this.isFold = val;
            },
            immediate:true
        }
    },
    props:{
        label:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:''
        },
        folded:{
            type:Boolean,
            default:false
        },
    },
    methods:{
        handleFold(){
            this.isFold =!this.isFold;
            this.$emit('fold',this.isFold);
        }
    }
}
</script>

<style>
.bi-collapse-box .bi-collapse-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px ;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.bi-collapse-box .bi-collapse-header .label{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}
.bi-collapse-box .bi-collapse-header .ctrl-box{
    font-size: 12px;
}
.bi-collapse-box .bi-collapse-header .ctrl-box .bi-icon{
    color: var(--bs-gray-500);
    font-size: 12px;
}
</style>